<template>
  <div class="label-remark">
    <titleShow :currentFriend="currentFriend"></titleShow>
    <el-divider></el-divider>

    <div class="tools-content">
      <ul class="task-list-ul">
        <li class="wangwang">
          <div class="wangwnag-lab"><span>旺旺</span></div>
          <div class="wangwnag-input">
            <el-input
              :disabled="taskItemForm.taskDetailId != null && (taskItemForm.status != null && taskItemForm.status >1)"
              size="mini"
              placeholder="请输入内容"
              v-model="baseform.buyerNick"
            >
            </el-input>
          </div>
        </li>
        <li>
          <div>
            <el-radio-group v-model="baseform.tradingType" :disabled="taskItemForm.taskDetailId != null && (taskItemForm.status != null && taskItemForm.status >1)">
              <el-radio :label="0">当天单</el-radio>
              <el-radio :label="1">预留单</el-radio>
            </el-radio-group>
          </div>
          <div>
            <el-checkbox
              v-model="baseform.orderType"
              :true-label="1"
              :false-label="0"
              >评价单</el-checkbox
            >
            <el-checkbox
            :disabled="taskItemForm.taskDetailId != null && (taskItemForm.status != null && taskItemForm.status >1)"
              v-model="baseform.rebatesType"
              :true-label="0"
              :false-label="1"
              >提前返款</el-checkbox
            >
          </div>
          <div>
            <el-checkbox
            :disabled="taskItemForm.taskDetailId != null && (taskItemForm.status != null && taskItemForm.status >1)"
              v-model="baseform.buyerType"
              :true-label="0"
              :false-label="1"
              >新人</el-checkbox
            >
          </div>
        </li>
        <li v-show="!itemshow">
          <el-button type="primary" @click="chooseShowChange"
            >选择任务</el-button
          >
        </li>
        <li v-show="itemshow">
          <div @click="sendMsg(taskItemForm)">
            <span>{{ taskItemForm.name }}</span>
          </div>
          <div>店铺名：{{ taskItemForm.storeName }}</div>
          <div>商品名称： {{ taskItemForm.productName }}</div>
          <div>商品价格:{{ taskItemForm.price }}</div>
          <div>关键词:{{ taskItemForm.keywords }}</div>
          <div style="display: flex">
            <span style="margin-right: 20px">
              <el-button type="primary" @click="removeChoose" :disabled="taskItemForm.taskDetailId != null && (taskItemForm.status != null && taskItemForm.status >1)">清除</el-button>
            </span>
          </div>
        </li>
        <li>
          <el-radio-group
            v-model="baseform.rebatesChannel"
            @change="rebatesChannelUpdate"
          >
            <el-radio :label="0">微信收款码</el-radio>
            <el-radio :label="1">银行卡</el-radio>
          </el-radio-group>
          <el-input
            v-if="rebatesChannel == 1"
            v-model="baseform.rebatesWay"
            type="textarea"
            placeholder="请输入银行卡信息"
          />
          <!-- 上传图片|视频 -->
          <div v-if="rebatesChannel == 0" class="set-circle-other">
            <fileUpload
              ref="upimg"
              :imageUrls="imageUrls"
              :defaultShowImg="rebatesChannelUrl"
            ></fileUpload>
            <div style="display: flex">
              <span style="margin-right: 20px">
                <el-button type="primary" @click="removeImg">清除</el-button>
              </span>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <div class="form-footer">
      <el-button type="primary" @click="submitTask">提 交</el-button>
      <el-button type="primary" @click="clearForm">取 消</el-button>
    </div>
    <el-dialog
      title="选择任务"
      :visible.sync="chooseShow"
      width="900px"
      style="height: 80%"
      top="10%"
      @close="handleClose"
      append-to-body
    >
      <el-table
        ref="displayForm"
        :data="toduList"
        height="400px"
        @cell-dblclick="chooseTableClick"
      >
        <el-table-column label="任务名称" align="center" prop="name" />
         <el-table-column label="主图" align="center" prop="picture" >
            <template slot-scope="scope">
              <img :src="'http://47.108.193.26:9999'+scope.row.picture">
        </template>
         </el-table-column>
        <el-table-column label="店铺名称" align="center" prop="storeName" />
        <el-table-column label="产品名称" align="center" prop="productName" />
        <el-table-column label="关键词" align="center" prop="keywords" />
        <el-table-column label="当日" align="center" prop="productName" >
           <template slot-scope="scope">
          <span>{{ scope.row.beDailyTradingVolume+" / "+scope.row.dailyTradingVolume }}</span>
        </template>
        </el-table-column>
         <el-table-column label="预留" align="center" prop="productName" >
           <template slot-scope="scope">
          <span>{{ scope.row.beReservedTradingVolume+" / "+scope.row.reservedTradingVolume  }}</span>
        </template>
         </el-table-column>
         <el-table-column label="评价单比例" align="center" prop="evaluation" />
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters, mapActions } from "vuex";
import titleShow from "./titleShow";
import fileUpload from "./fileUpload";

export default {
  name: "LabelRemark",
  data() {
    return {
      baseform: {
        taskId: "",
        buyerNick: "",
        tradingVolume: 0,
        orderNo: "", //
        tradingType: "",
        orderType: 0, //
        rebatesType: 1,
        buyerType: 1, //
        rebatesChannel: 1,
        rebatesWay: "",
        rebatesAmount: "",
      },
      imageUrls: [],
    };
  },
  props: {
    currentFriend: {
      type: Object,
      required: true,
      default: function () {
        return {};
      },
    },
  },
  components: {
    titleShow,
    fileUpload,
  },
  computed: {
    // 该好友的标签Id[1,2,3...]
    ...mapGetters({
      toduList: "conversation/toduList",
      chooseShow: "conversation/chooseShow",
      itemshow: "conversation/itemshow",
      rebatesChannel: "conversation/rebatesChannel",
      rebatesChannelUrl: "conversation/rebatesChannelUrl",
      reloadTodo: "conversation/reloadTodo",
      taskItemForm: "conversation/taskItemForm",
    }),
  },
  watch: {
    currentFriend(val, oldVal) {
      this.baseform.wxCode = val.FriendNo;
    },
    reloadTodo(val, oldVal) {
      console.log(val);
      if (val) {
        console.log("清理数据！");
        // 初始化數據
        if (this.baseform.rebatesChannel == 0) {
          this.$refs.upimg.clearAllUpfile();
        }

        this.imageUrls = [];
        this.$store.commit("conversation/SET_TASKITEMFORM", {});
        this.baseform = {
          taskId: "",
          buyerNick: "",
          tradingVolume: 0,
          orderNo: "", //
          tradingType: "",
          orderType: 0, //
          rebatesType: 1,
          buyerType: 1, //
          rebatesChannel: 1,
          rebatesWay: "",
          rebatesAmount: "",
        };
        this.$store.commit("conversation/SET_REBATESCHANNEL", 1);
        this.$store.commit("conversation/SET_REBATESCHANNELURL", "");
        this.$store.commit("conversation/SET_SHOWADDWXPAYMENTCODE", false);

        this.$store.dispatch("websocket/GetTodoList");
        this.$store.commit("conversation/SET_RELOADTODO", false);
      }
    },
    taskItemForm: {
      handler(val, oldVal) {
        if (val.buyerNick) {
          this.baseform.buyerNick = val.buyerNick;
        }
        if (val.tradingType) {
          this.baseform.tradingType = Number(val.tradingType);
        }
        if (val.buyerType) {
          this.baseform.buyerType = Number(val.buyerType);
        }
        if (val.rebatesType) {
          this.baseform.rebatesType = Number(val.rebatesType);
        }
        if (val.orderType) {
          this.baseform.orderType = Number(val.orderType);
        }
        if (val.rebatesChannel) {
          this.baseform.rebatesChannel = Number(val.rebatesChannel);
        }
        if (val.rebatesWay) {
          this.baseform.rebatesWay = val.rebatesWay;
        }

        for (let i in Object.keys(val)) {
          return; // 进入循环即不为空
        }

        console.log("清空任务选择！");
        this.$store.commit("conversation/SET_CHHOOSESHOW", false);
        this.$store.commit("conversation/SET_ITEMSHOW", false);
      },
      deep: true,
    },
  },
  methods: {
    created() {
      if (this.toduList.length === 0) {
        this.$store.dispatch("websocket/GetTodoList");
      }
    },
    clearForm() {
      this.$store.commit("conversation/SET_RELOADTODO", true);
    },

    submitTask() {
      // 当日单/预留单
      var data = this.baseform;
      this.baseform.wxCode = this.currentFriend.FriendNo;
      if (data.tradingType === "") {
        this.$message.warning("请选择 任务类型，当天单/预留单！");
        return;
      }
      // 返款渠道
      var channelMsg = "";
      if (data.rebatesChannel == 0) {
        //先从二维码获取中取
        if (this.rebatesChannelUrl != "") {
          data.rebatesWay = this.rebatesChannelUrl;
        } else if (this.imageUrls.length > 0) {
          data.rebatesWay = this.imageUrls[0];
        }
        channelMsg = "微信二维码";
      } else {
        channelMsg = "银行账号";
      }
      if (data.rebatesWay === "") {
        this.$message.warning("返款渠道为空，请输入" + channelMsg);
        return;
      }
      if (this.taskItemForm == null || this.taskItemForm.linkId === "") {
        this.$message.warning("请选择任务！");
        return;
      } else {
        data.taskId = this.taskItemForm.linkId;
      }
      // 修改
      if (this.taskItemForm.taskDetailId) {
        data.taskDetailId = this.taskItemForm.taskDetailId;
        this.$store.dispatch("websocket/UpdataTaskDatil", data);
      } else {
        // 新增
        this.saveForm(data);
      }
    },
    // 保存
    saveForm(data) {
      // return
      this.$store.dispatch("websocket/SaveTaskDatil", data);
    },
    chooseTableClick(row, column, cell, event) {
      console.log(row)
      this.$store.commit("conversation/SET_TASKITEMFORM", row);
      this.$store.commit("conversation/SET_ITEMSHOW", true);
      this.$store.commit("conversation/SET_CHHOOSESHOW", false);
    },
    chooseShowChange() {
      this.$store.commit("conversation/SET_CHHOOSESHOW", true);
    },
    //发送消息
    sendMsg(item) {
      if (item.picture) {
        let content = `http://47.108.193.26:9999${item.picture}`;
        this.$store.commit("conversation/SET_CONTENT", content);
        this.$store.commit('conversation/SET_CONTENT_TYPE', "Picture")
      }
      return;
    },
    removeChoose() {
      this.$store.commit("conversation/SET_TASKITEMFORM", {});
      this.$store.commit("conversation/SET_CHHOOSESHOW", false);
      this.$store.commit("conversation/SET_ITEMSHOW", false);
    },
    removeImg() {
      this.$store.commit("conversation/SET_REBATESCHANNELURL", "");
      this.$store.commit("conversation/SET_SHOWADDWXPAYMENTCODE", true);
      this.$refs.upimg.clearAllUpfile();
      this.imageUrls = [];
    },
    // 日期格式化
    parseTime(time, pattern) {
      if (arguments.length === 0 || !time) {
        return null;
      }
      const format = pattern || "{y}-{m}-{d} {h}:{i}:{s}";
      let date;
      if (typeof time === "object") {
        date = time;
      } else {
        if (typeof time === "string" && /^[0-9]+$/.test(time)) {
          time = parseInt(time);
        } else if (typeof time === "string") {
          time = time.replace(new RegExp(/-/gm), "/");
        }
        if (typeof time === "number" && time.toString().length === 10) {
          time = time * 1000;
        }
        date = new Date(time);
      }
      const formatObj = {
        y: date.getFullYear(),
        m: date.getMonth() + 1,
        d: date.getDate(),
        h: date.getHours(),
        i: date.getMinutes(),
        s: date.getSeconds(),
        a: date.getDay(),
      };
      const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
        let value = formatObj[key];
        // Note: getDay() returns 0 on Sunday
        if (key === "a") {
          return ["日", "一", "二", "三", "四", "五", "六"][value];
        }
        if (result.length > 0 && value < 10) {
          value = "0" + value;
        }
        return value || 0;
      });
      return time_str;
    },
    handleClose(done) {
      this.$store.commit("conversation/SET_CHHOOSESHOW", false);
    },
    rebatesChannelUpdate(histType) {
      console.log(histType);
      this.baseform.rebatesWay = "";
      this.$store.commit("conversation/SET_REBATESCHANNEL", histType);
      if (histType == 0) {
        this.$store.commit("conversation/SET_REBATESCHANNELURL", "");
        this.$store.commit("conversation/SET_SHOWADDWXPAYMENTCODE", true);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.label-remark {
  width: 100%;
  height: 100%;
  overflow: hidden;

  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 5px;

  .tools-content {
    width: 100%;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    background: #f4f4f5;
    background-color: $bg-color-content-base;
    .task-list-ul {
      .wangwang {
        display: flex;
        .wangwnag-lab {
          width: 20%;
          float: left;
        }
        .wangwnag-input {
          width: 50%;
        }
      }
      .flex-box {
        display: flex;
        span {
          flex: 1;
        }
      }
      padding: 5px;
      li {
        // display: flex;
        // justify-content: center;
        // align-items: center;
        font-size: 12px;
        border-bottom: 1px solid #ccc;
        padding-bottom: 10px;
        margin-bottom: 10px;
        div {
          line-height: 25px;
        }
        span {
          // flex: 1;
          display: flex;
        }
        button {
          padding: 5px 10px;
          font-size: 12px;
        }
      }
    }
  }

  .el-button {
    padding: 2px;
  }

  ::v-deep .el-dialog {
    .p-class {
      margin: 2px;
    }
    .label-class {
      color: #409eff;
      background-color: #ecf5ff;
      border-radius: 4px;
      border-color: solid #d9ecff 1px;
      display: inline-block;
      height: 32px;
      line-height: 32px;
      font-size: 12px;
      padding: 0 5px;
      margin: 2px;
      cursor: pointer;
    }
    .chose {
      color: #ffd04b;
    }
  }
}
.el-divider--horizontal,
.form-footer {
  margin: 5px;
}
</style>